import React, { CSSProperties } from 'react'
import CommonNav from '../../components/CommonNav/CommonNav'
import { Box, Input } from '@material-ui/core'
import { userLogin,LoginAns } from '../../api/user'
import Message from '../../components/Message/Message'
import { withRouter,RouteComponentProps,Link } from 'react-router-dom'
import { inject,observer } from 'mobx-react'
import UserStore from '../../store/modules/userStore'
const LoginStyle: CSSProperties = {
    minHeight: '100vh',
    paddingTop: '9vh',
    backgroundColor: '#fff'
}
const titleStyle: CSSProperties = {
    padding: '3vh 10vw',
    color: '#333',
    fontSize: '20px',
    fontWeight: 'bolder'
}
const formStyle: CSSProperties = {
    width: '100vw',
    padding: '0 12vw'
}
const inputStyle: CSSProperties = {
    margin: '2vh 0'
}
const btnStyle: CSSProperties = {
    width: '100%',
    padding: '1.5vh',
    textAlign: 'center',
    backgroundColor: '#9c27b0',
    borderRadius: '30px',
    color: '#fff',
    fontWeight: 'bolder',
    marginTop: '5vh'
}
const goRegStyle: CSSProperties = {
    textAlign: 'right',
    margin: '2vh 0',
    fontSize: '12px'
}
interface IProps extends RouteComponentProps{
    userStore?: UserStore
}
const Login = (props: IProps) => {
    const accountReg = /^[a-z0-9_-]{3,16}$/
    const pwdReg = /^[a-z0-9_-]{6,18}$/
    const [account, setAccount] = React.useState<string>('')
    const [pwd, setPwd] = React.useState<string>('')
    const [flag,setFlag] = React.useState<boolean>(false)
    React.useEffect(() => {
        if(props.userStore?.isLogin){
            Message('info','请勿重复登录')
            props.history.go(-1)
        }
    },[ ])// eslint-disable-line react-hooks/exhaustive-deps
    const test = () => {
        if(accountReg.test(account) && pwdReg.test(pwd)){
            setFlag(true)
        }else{
            setFlag(false)
        }
    }
    const handleLogin = () => {
        if(flag){
            userLogin(account,pwd)
                .then(res => {
                    const {code,msg,token} = res as unknown as LoginAns
                    if(code === 200){
                        localStorage.setItem('token',token)
                        props.userStore?.getUserInfo()
                        Message('success',`${msg},页面即将跳转到个人页面`)
                        setTimeout(() => {
                            props.history.replace('/profile')
                        }, 1500);
                    }else{
                        Message('error',msg)
                    }
                })
        }else{
            Message('warning','输入的账号或密码格式不正确')
            setAccount('')
            setPwd('')
        }
    }
    return (
        <div style={LoginStyle}>
            <CommonNav isBack={true} text='登录' />
            <div style={titleStyle}>
                账号密码登录
            </div>
            <Box component='form' style={formStyle}>
                <Input placeholder='请输入账号' color='secondary' fullWidth={true} style={inputStyle} value={account} onBlur={test} onChange={(e) => {
                    setAccount(e.target.value)
                }} />
                <Input placeholder='请输入密码' color='secondary' fullWidth={true} style={inputStyle} type='password' value={pwd} onBlur={test} onChange={(e) => {
                    setPwd(e.target.value)
                }} />
                <div style={btnStyle} onClick={handleLogin}>
                    登录
                </div>
                <div style={goRegStyle}>
                    <span>没有账号？</span><Link to='/reg' style={{color: '#9c27b0'}}>新用户注册</Link>
                </div>
            </Box>
        </div>
    )
}

export default withRouter(inject('userStore')(observer(Login)))